<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="../internal.js"></script>
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="three.js/css/index.css" />
<script src="three.js/js/three.min.js"></script>
<script src="three.js/js/photo-sphere-viewer.min.js"></script>
<script src="three.js/js/myUtil_1.2.1.js"></script>
<script>
    //可以直接使用以下全局变量
    //当前打开dialog的实例变量
    //alert('editor: '+editor);
    //一些常用工具
    //alert('domUtils: '+domUtils);
    //alert('utils: '+utils);
    //alert('browser: '+browser);
    // /static/js/three.js/images/005.jpg
    $(function () {
        $("#srcAddr").blur(function () {
            var picSrc = this.value;
            if(picSrc.length == 0){
                return;
            }
            var div = document.getElementById('my-pano');
            var PSV = new PhotoSphereViewer({
                // Panorama, given in base 64
                panorama: picSrc,

                // Container
                container: div,

                autoload:true,

                // Deactivate the animation
                time_anim: 2000,

                // Display the navigation bar
                navbar: true,

                // Resize the panorama
                size: {
                    width: '90%',
                    height: 270
                }
            });
        })
    })

    dialog.onok = function (){
        var picUrl = $("#srcAddr").val();
        var disPWidth = $("#disPWidth").val().length == 0 ? "1024" : $("#disPWidth").val();
        var disPHeight = $("#disPHeight").val().length == 0 ? "700" : $("#disPHeight").val();
        if (picUrl.trim().length == 0){
            console.log("空地址");
            return;
        }

        var insertDomText = '<div class="360pv" dispwidth="'+disPWidth+'" dispheight="'+disPHeight+'"  url="' + picUrl + '">'
            + '<img src="' + editor.options.serverHost +'js/ueditor/dialogs/attachment/fileTypeImages/icon_jpg.gif" /><b>[360°全景图]</b>' + picUrl
            + '</div>'
        editor.execCommand('inserthtml', insertDomText);
        dialog.close();
    };

    function check_file(){
        $("#uploadForm").append('<input id="file" type="file" onchange="preview(this,\'60\', false, \'disImg\', \'count\',\'recordDelFileName\')" name="Filedata"'
            + '/>');
        $("#file").click();
    }

    function upload_file(){
        var fromData = new FormData();
        fromData.append("Filedata",$("#file")[0].files[0])
        $.ajax({
            url: editor.options.serverHost + "upload/file",
            type:"post",
            data:fromData,
            processData:false,
            contentType:false,
            success:function(data){
                var dataJson = $.parseJSON(data);
                if(dataJson.result){
                    alert("上传失败!");
                }else{
                    alert("上传成功!");
                    $("#srcAddr").val(editor.options.serverHost + "downLoad/file?fileId=" + dataJson.fileId);
                    $("#srcAddr").blur();
                }
            }
        });
    }
</script>
    <div style="width: 100%">
        <div style="width: 25%; float: left">360全景图片地址:</div>
        <div style="width: 70%; float: left"><input style="width: 100%" id="srcAddr" type="text" placeholder="请输入需要插入的360°全景图的链接地址" /></div>
    </div>
    <div style="width: 100%">
        <div style="width: 25%; float: left">预览长度:</div>
        <div style="width: 25%; float: left"><input style="width: 100%" id="disPWidth" type="text" placeholder="默认1024px" /></div>
        <div style="width: 20%; float: left">预览高度:</div>
        <div style="width: 25%; float: left"><input style="width: 100%" id="disPHeight" type="text" placeholder="默认700px" /></div>
    </div>
    <div style="width: 100%">
        <div style="width: 25%; float: left">上传新文件:</div>
        <div style="width: 10%; float: left" id="disImg">
            <img src="upload_default_show.png" width="60px" height="60px" />
        </div>
        <div style="width: 25%; float: left"><button type="button" onclick="check_file()">选择文件</button> </div>
        <div style="width: 25%; float: left"><button type="button" onclick="upload_file()">上传</button> </div>
    </div>

    <div style="width: 100%">
        <div style="display: none">
            <form id="uploadForm" method="post" enctype="multipart/form-data">
                <!-- 文件上传input -->
                <span id="fAliase"></span>
            </form>
            <span id="count" val="0" ></span> <!-- 用于上传文件当前添加图片点击次数计数 -->
        </div>
        <div id="recordDelFileName" style="display: none">
            <!--用于临时记录被删除的文件-->
        </div>
    </div>

    <div style="width: 100%; overflow: auto;">
        <div style="text-align: left; font-weight: bold; margin-left: 5%;">全景效果预览:</div>
        <div id="my-pano" class="pano"  style="margin:0 auto; width: 90%; height: 270px; background-color: #EEEEEE;"></div>
    </div>
</body>
</html>